<template>
  <div class="site-details-page">
    <ul class="site-link-list">
      <li
        :class="{active: index === selectIndex}"
        :key="index"
        v-for="(item,index) in siteDetailsList"
        @click="tabToggle(item,index)"
      >{{ item.name }}
      </li>
    </ul>
    <ul>
      <li v-if = "sitePenal === 'overviewControl'">
        <overview-control></overview-control>
      </li>
      <li v-if = "sitePenal === 'realTimeMonitoring'">
        <real-time-monitoring ref="crealTimeMonitoring" @showwindtitle="onshowwindtitle"></real-time-monitoring>
      </li>
      <li v-if = "sitePenal === 'historicalData'" >
        <historical-data ref="historicalData"></historical-data>
      </li>
      <li v-if = "sitePenal === 'realTimeParam'">
        <real-time-param></real-time-param>
      </li>
      <!--<li v-if = "sitePenal === 'videoMonitor'">
        <video-monitor></video-monitor>
      </li>-->
     <!-- <li v-if = "sitePenal === 'qualityControl'">
        <quality-control></quality-control>
      </li>-->
      <li v-if = "sitePenal === 'maintenance'">
        <maintenance></maintenance>
      </li>
      <li v-if = "sitePenal === 'dataStatistics'">
        <data-statistics ref="cdataStatistics"></data-statistics>
      </li>
    </ul>
  </div>
</template>

<script>
  import overviewControl from '@/views/home/overviewControl'
  import realTimeMonitoring from '@/views/home/realTimeMonitoring'
  import videoMonitor from '@/views/home/videoMonitor'
  import qualityControl from '@/views/home/qualityControl'
  import maintenance from '@/views/home/maintenance'
  import dataStatistics from '@/views/home/dataStatistics'
  import historicalData from '@/views/home/historicalData'
  import realTimeParam from '@/views/home/realTimeParam'
    let siteDetailsList = [{
      name:'管控概览',
      src:'overviewControl'
    },{
      name:'实时监控',
      src:'realTimeMonitoring'
    },{
      name:'实时参数',
      src:'realTimeParam'
    },{
      name:'运维评价',
      src:'maintenance'
    },{
      name:'历史数据',
      src:'historicalData'
    }/*,{
      name:'视频监控',
      src:'videoMonitor'
    }*/,{
      name:'数据统计',
      src:'dataStatistics'
    }];
    export default {
        name: "siteDetails",
        data(){
          return {
            siteDetailsList,
            selectIndex: 0,
            sitePenal:'overviewControl',
            equipId:0,
            siteinfo:[]
          }
        },
        methods:{
          onshowwindtitle(val){
            this.siteinfo = val;
            this.$emit('showwindtitle',val);
          },
          tabToggle(item,index){
            this.selectIndex = index;
            this.sitePenal = item.src;
            console.log(this.selectIndex,this.sitePenal);
            let self = this;
            if(self.sitePenal === 'realTimeMonitoring'){
              let timer = setInterval(function(){
                if(self.$refs.crealTimeMonitoring){
                  // self.initrealTimeMonitoring(self.equipId);
                  clearInterval(timer);
                }
              },100)     
            }else if(self.sitePenal === 'dataStatistics'){
              let timer = setInterval(function(){
                if(self.$refs.cdataStatistics){
                  self.$refs.cdataStatistics.searchData(self.equipId);
                  clearInterval(timer);
                }
              },100)   
            }else if(self.sitePenal==='historicalData'){
              let timer = setInterval(function(){
                if(self.$refs.historicalData){
                  self.$refs.historicalData.searchData(self.equipId);
                  clearInterval(timer);
                }
              },100)   
            }
          },
          // initrealTimeMonitoring(equipId){
          //   this.sitePenal = 'realTimeMonitoring';
          //   this.selectIndex = 1;
          //   this.equipId = equipId;
          //   let self = this;
          //   let timer = setInterval(function(){
          //       if(self.$refs.crealTimeMonitoring){
          //         self.$refs.crealTimeMonitoring.searchData(self.equipId);
          //         clearInterval(timer);
          //       }
          //   },100)
          // }
        },
        mounted(){
            console.log(this.sitePenal);
        },
        components:{
          overviewControl,
          realTimeMonitoring,
          videoMonitor,
          qualityControl,
          dataStatistics,
          historicalData,
          maintenance,
          realTimeParam
        }
    }
</script>

<style scoped lang="less">
.site-link-list{
  height: 32px;
  line-height: 30px;
  li{
    width: calc(100% / 6);
    float: left;
    text-align: center;
    border-left: 1px solid #d6e3f2;
    border-bottom: 1px solid #d6e3f2;
    position: relative;
    cursor: pointer;
  }
  li:first-child{
    border-left: none;

  }
  li:hover{
    background: #eaeff4;
  }
  li.active{
    color: #166bce;
    border-bottom: 1px solid #fff;
  }
  li.active:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #166bce;
  }
}
.site-details-scrollbar{
  height: 386px;
}
</style>
